<template>
	<view class="login-page" style="position: relative;">
		<view class="login-warp">
			<view class="logo-warp">
				<image class="logo" src="/static/image//Logo.png"></image>
			</view>
			<view class="logo-text">
				Hello， 
			</view>
			<view class="logo-text">
				欢迎使用合极智能监控系统
			</view>
			<form class="form-warp" @submit="formSubmit">
				<view v-if="isAccount">
					<view class="account">
						账号
					</view>
					<view class="input-group">
						<input type="number" v-model="uid" name="uid" placeholder="请输入账号" />
					</view>
					<view class="textSize">
						密码
					</view>
					<view class="input-group">
						<input password v-model="upwd" name="upwd" placeholder="请输入密码" />
					</view>
				</view>
				<view v-else>
					<view class="account">
						手机
					</view>
					<view class="input-group" style="display: flex;justify-content: space-between">
						<input style="width: 65%;" type="number" v-model="phone" name="phone" placeholder="请输入手机号" />
						<button v-if="btnFlag" style="width: 104px;font-size: 16px;margin: 0 !important;background-color: #E3EDF7 !important;color: #113A62;opacity: 0.7;" class="uni-button">{{btnNumber}}S</button>
						<button v-else @click="getCode()" style="width: 104px;font-size: 16px;margin: 0 !important;background-color: #E3EDF7 !important;color: #113A62;opacity: 0.7;" class="uni-button">发送短信</button>
					</view>
					<view class="textSize">
						验证码
					</view>
					<view class="input-group">
						<input v-model="code" name="code" placeholder="请输入验证码" />
					</view>
				</view>
				<button form-type="submit" class="uni-button">登录</button>
				<view class="forget">
					<view @click="accountChange">{{accountText}}</view>
					<view  @click="forget">忘记密码</view>
				</view>
				<!-- <navigator class="btn-setting" url="../setting/index">服务器配置</navigator> -->
				<!-- <view @click="goRegister()" class="registered">
					新用户注册
				</view> -->
			</form>
			<view class="version">
				<label class="radioCheck" style="display: flex;"><radio value="true" :checked="agree" @click="agreeClick" />
					<view>
						已同意
						<text @click="server" style="display: inline;">《管理柜App服务协议》</text>
						、
						<text @click="privacy" style="display: inline;">《管理柜App用户隐私政策》</text>
					</view> 
				</label>
				<view class="version-text">
					HJDMV{{subTitle}}
				</view>
			</view>
			
		</view>
		<view v-if="isSuccess == 0" class="success">
			<view class="success_title">
				<view>
					<image style="max-width: 20px;max-height: 20px;line-height: 28px;vertical-align:text-bottom;" src="../../static/image/success.png" mode=""></image>
					<text class="success_text">通知</text>
				</view>
				<view>
					<image @click="close()" style="max-width: 20px;max-height: 20px;line-height: 28px;vertical-align:middle;" src="../../static/image/searchClose.png" mode=""></image>
				</view>
				
			</view>
			<view class="success_content">
				登录成功！
			</view>
		</view>
		<view v-if="isSuccess == 1" class="error">
			<view class="success_title">
				<view>
					<image style="max-width: 20px;max-height: 20px;line-height: 28px;vertical-align:text-bottom;" src="../../static/image/error.png" mode=""></image>
					<text class="success_text">通知</text>
				</view>
				<view>
					<image @click="close()" style="max-width: 20px;max-height: 20px;line-height: 28px;vertical-align:middle;" src="../../static/image/searchClose.png" mode=""></image>
				</view>
				
			</view>
			<view class="success_content">
				{{successContent}}
			</view>
		</view>
		<view v-if="isShadow" class="shadow"></view>
		<view v-if="isShadow" class="pwd_all">
			<view class="pwd_title">{{shadowTitle}}</view>
			<form class="form-warp">
				<view style="margin-top: 20px;" class="pwd_Size">
					{{shadowContent}}
				</view>
				<view class="next" @click="shadowClose()">知道了</view>	
			</form>
		</view>
	</view>
</template>
<script>
	var that;
	var apiUrls;
	var apiPorts;
	
	import {
		mapMutations
	} from 'vuex';
	
	export default {
		onReady: async function() {
			that = this;
			this.checkUpdate().then(function(res) {
				if (res) return;
			});
		},
		data() {
			return {
				title: '',
				subTitle: '',
				uid: '', // 用户id
				upwd:'', // 用户密码
				phone:'', // 手机号
				code: '', // 验证码
				isChecked: true, // 是否自动登录
				agree: true ,// 是否同意协议
				isAccount: true, // 账号登录
				accountText: '手机号登录',
				isSuccess: null,
				successContent: '', // 报错提示内容
				isShadow: false, // 隐私协议未勾选提示
				shadowTitle:'', // 问题框标题
				shadowContent:'', // 问题框内容
				btnFlag: false, // 短信验证码倒计时
				btnNumber: 60, // 短信验证码倒计时
			}
		},
		onLoad() {
			that = this;
			
			let {
				sysVersion,
				userId,
				userPwd,
				isAuto,
				apiUrl,
				apiPort,
				langKey,
			} = this.$sys.getSysInfo();
			this.uid = userId
			this.upwd = userPwd
			this.isChecked = isAuto
			this.subTitle = sysVersion
			apiUrls = apiUrl
			apiPorts = apiPort
		},
		methods: {
			//更新检查
			checkUpdate: function() {
				return new Promise(function(resolve, reject) {
					let platform = uni.getSystemInfoSync().platform;
					switch (platform) {
						case 'android':
							let sys = that.$sys.getSysInfo();
							that.$http.ylget('smartPhone/getAppVersionInfo', {
								appNo: sys.appId
							}).then(function(e) {
								if (e) {
									console.log('sys',sys)
									let currentVerson = parseInt(sys.sysVersion.replace(/\./g, ''));
									let latestVerson = parseInt(e.verson.replace(/\./g, ''));
									console.log('currentVerson',currentVerson)
									console.log('latestVerson',latestVerson)
									if (latestVerson > currentVerson) {
										if (platform === 'android' && (e.androidLink == '' || e.androidLink == null)) {
											resolve(false);
											return;
										}
										if (platform === 'ios' && (e.iosLink == '' || e.iosLink == null)) {
											resolve(false);
											return;
										};
										that.$util.reLaunch('sys/update');
										resolve(true);
									}
									resolve(false);
								}
							});
							break;
						default:
							console.log('运行在开发者工具上');
							resolve(false);
							break;
					}
				})
			},
			// 账号手机号切换
			accountChange(){
				if(that.isAccount){
					// 手机号登录
					that.isAccount = false
					that.accountText = '账号登录'
				}else{
					// 账号登录
					that.isAccount = true
					that.accountText = '手机号登录'
				}
			},
			// 获取验证码
			getCode(){
				var phoneReg=/^1[3-9][0-9]{9}$/
				if(phoneReg.test(that.phone)){
					that.btnFlag = true
					let timeSet = setInterval(()=>{
						that.btnNumber -= 1
						if(that.btnNumber == 0){
							clearInterval(timeSet)
							that.btnFlag = false
							that.btnNumber = 60
						}
					},1000)
					that.$http.get('data/person/sendVerifyCode2', {
						phone:that.phone,
					}).then(e => {
					}).catch(()=>{
						if(e){
							that.successContent = e
						}else{
							that.successContent = '获取验证码失败！'
						}
						that.isSuccess = 1
						setTimeout(function(){
							that.isSuccess = null
						},2000)
					})
				}else{
					that.successContent = '手机号格式不正确'
					that.isSuccess = 1
					setTimeout(function(){
						that.isSuccess = null
					},2000)
				}
				
			},
			// 跳转注册页面
			goRegister(){
				that.$util.pageTo('login/register');
			},
			// 跳转忘记密码页面
			forget(){
				that.$util.pageTo('login/forgetPwd');
			},
			radioClick(){
				that.isChecked = !that.isChecked
			},
			// 是否同意协议
			agreeClick(){
				that.agree = !that.agree
			},
			// 关闭成功失败弹窗
			close(){
				that.isSuccess = null
			},
			// 下一步
			shadowClose(){
				that.isShadow = false
			},
			formSubmit(e) {
				var formdata = e.detail.value;
				if (that.validate(formdata)) {
					if(that.agree){
						if(that.isAccount){
							if(!formdata.uid){
								that.successContent = '请输入账号'
								that.isSuccess = 1
								setTimeout(function(){
									that.isSuccess = null
								},2000)
								return;
							}
							if(!formdata.upwd){
								that.successContent = '请输入密码'
								that.isSuccess = 1
								setTimeout(function(){
									that.isSuccess = null
								},2000)
								return;
							}
								
							// 账号登录
							that.$http.loginPost('data/person/login2', {
								fuserno: formdata.uid,
								fpassword: formdata.upwd
							}).then(e => {
								console.log('e',e)
								let sysInfo = that.$sys.setUser({
									userId: e.id,
									fsiteNo: e.fsiteNo,
									name: e.username,
									froleid: e.froleid,
									isAuto: that.isChecked,
									userPwd: that.upwd,
									token: e.token,
									langKey: that.langKey,
									fsiteName: e.fsiteName,
									froleidName: e.froleidName
								});
								that.isSuccess = 0
								setTimeout(function(){
									that.isSuccess = null
									that.$util.reLaunch('index/index');
								},2000)
								
							}).catch((e) => {
								if(e == '你还不是用户，请先注册'){
									that.shadowTitle = "通知"
									that.shadowContent = "你还不是用户，请先注册"
									that.isShadow = true
								}else{
									that.successContent = e
									that.isSuccess = 1
									setTimeout(function(){
										that.isSuccess = null
									},2000)
								}
							});
						}else{
							if(!formdata.phone){
								that.successContent = '请输入手机号'
								that.isSuccess = 1
								setTimeout(function(){
									that.isSuccess = null
								},2000)
								return;
							}
							if(!formdata.code){
								that.successContent = '请输入验证码'
								that.isSuccess = 1
								setTimeout(function(){
									that.isSuccess = null
								},2000)
								return;
							}
								
								// 手机号登录
								that.$http.loginPost('data/person/login2', {
									phone: formdata.phone,
									verifyCode: formdata.code
								}).then(e => {
									let sysInfo = that.$sys.setUser({
										userId: e.id,
										fsiteNo: e.fsiteNo,
										name: e.username,
										froleid: e.froleid,
										isAuto: that.isChecked,
										userPwd: that.upwd,
										token: e.token,
										langKey: that.langKey,
										fsiteName: e.fsiteName,
										froleidName: e.froleidName
									});
									that.isSuccess = 0
									setTimeout(function(){
										that.isSuccess = null
										that.$util.reLaunch('index/index');
									},2000)
									
								}).catch((e) => {
									if(e == '你还不是用户，请先注册'){
										that.shadowTitle = "通知"
										that.shadowContent = "你还不是用户，请先注册"
										that.isShadow = true
									}else{
										that.successContent = e
										that.isSuccess = 1
										setTimeout(function(){
											that.isSuccess = null
										},2000)
									}
								});
						}
						console.log('formdata',formdata)
						
					}else{
						that.shadowTitle = "提示"
						that.shadowContent = "请阅读《服务协议》、《用户隐私政策》后勾选同意。"
						that.isShadow = true
					}
					
				}
			},
			// 跳转到服务协议
			server(){
				that.$util.pageTo('login/server')
			},
			// 跳转到隐私政策
			privacy(){
				that.$util.pageTo('login/privacy')
			},
			validate(formdata) {
				// if (!that.$util.validate(formdata.uid, "账号不能为空")) return false;
				// if (!that.$util.validate(formdata.upwd, "密码不能为空")) return false;
				return true;
			},
			...mapMutations(['login'])
		}
	}
</script>
<style>
	@import url("index.css");
	/* 遮罩层 */
	.shadow{
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		background: #FAFCFD;
		opacity: 0.85;
	}
	.success{
		width: 80%;
		height: 116px;
		background: linear-gradient(0deg, rgba(225, 255, 220, 0.5), rgba(225, 255, 220, 0.5)), #E3EDF7;
		box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
		border-radius: 4px;
		margin: auto;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		box-sizing: border-box;
		padding: 16px;
	}
	.error{
		width: 80%;
		height: 116px;
		background: linear-gradient(0deg, rgba(255, 40, 40, 0.2), rgba(255, 40, 40, 0.2)), #FFFFFF;
		box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
		border-radius: 4px;
		margin: auto;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		box-sizing: border-box;
		padding: 16px;
	}
	.success_title{
		width: 100%;
		display: flex;
		justify-content: space-between;
		/* padding: 18px; */
	}
	.success_text{
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 18px;
		line-height: 28px;
		color: #113A62;
		margin-left:10px;
	}
	.success_content{
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 16px;
		line-height: 24px;
		color: #113A62;
		margin-top: 6px;
	}
	
	.next{
		width: 100%;
		height: 48px;
		text-align: center;
		line-height: 48px;
		background: #E3EDF7;
		/* outer2 */
		box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
		border-radius: 4px;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 600;
		font-size: 20px;
		letter-spacing: -0.4px;
		color: #8B9EB0;
		margin-top: 60px;
	}
	.pwd_Size{
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 18px;
		line-height: 24px;
		color: #113A62;
	}
	.pwd_title{
		width: 100%;
		text-align: center;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 600;
		font-size: 24px;
		line-height: 32px;
		color: #113A62;
		margin-top: 15px;
	}
	.pwd_all{
		width: 80%;
		margin: auto;
		height: 248px;
		background: #E3EDF7;
		box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
		border-radius: 4px;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		padding: 16px;
	}
</style>
